<script>
import { toRefs, defineComponent, reactive, getCurrentInstance } from "vue";

export default defineComponent({
  setup() {
    let data = reactive({ activeKey: 1 });
    const { proxy } = getCurrentInstance();

    return {
      ...toRefs(data),
      proxy,
    };
  },
  render() {
    let that = this.proxy;
    return (
      <div
        onDragstart={(e) => {
          this.$store.commit("store_ondragstart", { e, that });
        }}
      >
        <a-collapse
          accordion
          v-model={[this.activeKey, "activeKey"]}
          bordered={false}
        >
          <a-collapse-panel header="通用组件" key="1">
            <div class="componentList">
              <a-config-provider auto-insert-space-in-button={false}>
                <a-button
                  class="ant-btn ant-btn-primary"
                  style={{ width: "80px", height: "50px", margin: "8px" }}
                  draggable="true"
                  data-type="button"
                >
                  按钮
                </a-button>
              </a-config-provider>
              <div
                class="text"
                draggable="true"
                style={{
                  color: "#409eff",
                  width: "80px",
                  height: "50px",
                  lineHeight: "50px",
                  margin: "8px",
                  fontSize: "24px",
                }}
                data-type="text"
              >
                文本
              </div>
              <div
                style={{
                  width: "80px",
                  height: "50px",
                  margin: "8px",
                  lineHeight: "50px",
                  textAlign: "center",
                  color: "white",
                  fontSize: "16px",
                  backgroundSize: "80px 50px",
                  textShadow: "0 0 1px #000000",
                  backgroundImage:
                    "url(" + require("../assets/images/img.png") + ")",
                }}
                draggable="true"
                data-type="img"
              >
                图片
              </div>
            </div>
          </a-collapse-panel>
          <a-collapse-panel header="容器组件" key="2">
            <div class="componentList">
              <div class="box">
                <img
                  src={require("../assets/images/fixedBox.png")}
                  width="54"
                  height="54"
                  draggable="true"
                  data-type="fixedBox"
                />
                <p>固定容器</p>
              </div>
              <div class="box">
                <img
                  src={require("../assets/images/freeBox.png")}
                  width="54"
                  height="54"
                  draggable="true"
                  data-type="freeBox"
                />
                <p>自由容器</p>
              </div>
              <div class="box">
                <img
                  src={require("../assets/images/colBox.png")}
                  width="54"
                  height="54"
                  draggable="true"
                  data-type="colBox"
                />
                <p>多列容器</p>
              </div>
            </div>
            <div class="componentList">
              <div class="box">
                <img
                  src={require("../assets/images/seniorBox.png")}
                  width="54"
                  height="54"
                  draggable="true"
                  data-type="seniorBox"
                />
                <p>高级容器</p>
              </div>
            </div>
          </a-collapse-panel>
          <a-collapse-panel header="导航组件" key="3">
            <div class="componentList">
              <div class="box">
                <img
                  src={require("../assets/images/navMenu.png")}
                  width="54"
                  height="54"
                  draggable="true"
                  data-type="navMenu"
                />
                <p>导航菜单</p>
              </div>
              <div class="box">
                <img
                  src={require("../assets/images/tab.png")}
                  width="54"
                  height="54"
                  draggable="true"
                  data-type="seniorBox"
                />
                <p>标签页</p>
              </div>
            </div>
          </a-collapse-panel>
          <a-collapse-panel header="图文组件" key="4">
            <div class="componentList">
              <div class="box">
                <img
                  src={require("../assets/images/article.png")}
                  width="54"
                  height="54"
                  draggable="true"
                  data-type="seniorBox"
                />
                <p>文章</p>
              </div>
              <div class="box">
                <img
                  src={require("../assets/images/imgTextList.png")}
                  width="54"
                  height="54"
                  draggable="true"
                  data-type="seniorBox"
                />
                <p>图文列表</p>
              </div>
              <div class="box">
                <img
                  src={require("../assets/images/carousel.png")}
                  width="54"
                  height="54"
                  draggable="true"
                  data-type="carousel"
                />
                <p>轮播图</p>
              </div>
            </div>
            <div class="componentList">
              <div class="box">
                <img
                  src={require("../assets/images/imgList.png")}
                  width="54"
                  height="54"
                  draggable="true"
                  data-type="seniorBox"
                />
                <p>图片列表</p>
              </div>
            </div>
          </a-collapse-panel>
        </a-collapse>
      </div>
    );
  },
});
</script>
